<template>
  <div class="page-body">
    <div class="head">
      <div class="head-total">
        <div>
          <div>订单总金额</div>
          <div class="total-price">¥{{ sumPayPrice || 0 }}</div>
        </div>
        <div>
          <div>今日订单金额</div>
          <div class="total-price">¥{{ sumDaily || 0 }}</div>
        </div>
        <div>
          <div>订单总数</div>
          <div class="total-price">{{ totalCount || 0 }}</div>
        </div>
      </div>
    </div>
    <div v-if="orderList.length" class="order-list">
      <div class="order-item" v-for="item in orderList" :key="item.id">
        <div class="title">
          <span class="font-w-600">下单客户：</span>
          <img :src="item.avatar_url" alt="" />
          <span>{{ item.nickname }}</span>
        </div>
        <div v-for="goods in item.goods_list" :key="goods.goods_id">
          <div class="goods">
            <img :src="goods.pic" alt="" />
            <div class="goods-content">
              <div class="name-price font-w-600">
                <div class="name">
                  {{ goods.name }}
                </div>
                <div class="price">¥{{ goods.total_price }}</div>
              </div>

              <div class="attr-num">
                <div class="attr">
                  <template v-for="(attr, i) in goods.attr_list">
                    {{ attr.attr_group_name }}:{{ attr.attr_name }}
                    {{ i < goods.attr_list.length - 1 ? "，" : "" }}
                  </template>
                </div>
                <div class="num">x{{ goods.num }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="total">
          共
          <span class="color-main">{{
            goodsNumTotal(item.goods_list) || 0
          }}</span>
          件，实收：
          <span class="color-main">¥{{ item.total_price }}</span>
          (含快递：¥{{ item.express_price || 0 }})
        </div>
        <div class="order-no">
          <div class="item">
            <span class="font-w-600">下单时间：</span>
            <span class="color-999">{{ item.created_at }}</span>
          </div>
          <div class="item">
            <span class="font-w-600">订单编号：</span>
            <span class="color-999">{{ item.order_no }}</span>
            <span @click="onCopy(item.order_no)" class="copy">复制</span>
          </div>
          <div class="item">
            <span class="font-w-600">订单状态：</span>
            <span class="color-999">已成交</span>
          </div>
        </div>
      </div>
    </div>

    <u-empty mode="data" v-else></u-empty>
  </div>
</template>
<script>
import request from "@/common/http";
import "../static/js/MOCHAT";
export default {
  data() {
    return {
      orderList: [],
      page: {
        pageNo: 1,
        pageSize: 10,
      },
      loadmoreStatus: "loadmore",
      queryObj: {
        agentId: "", //应用Id
        roomId: "", //群Id
        contactId: "", //联系人Id
        wxExternalUserid: "", //用户id
      },
      // queryObj: {
      //   agentId: "5", //应用Id
      //   roomId: "2", //群Id
      //   contactId: "", //联系人Id
      // },
      sumPayPrice: "",
      sumDaily: "",
      totalCount: "",
      store_id: "",
    };
  },
  onLoad(params) {
    this.store_id = params.store_id || "";
  },
  onShow() {
    this.getId();
  },
  computed: {
    goodsNumTotal(goodslist) {
      return function (goodslist) {
        let total = 0;
        goodslist.forEach((item) => {
          total += Number(item.num);
        });
        return total;
      };
    },
  },
  methods: {
    getId() {
      MOCHAT.getExtData((res) => {
        // 从客户画像打开时可以获取员工id(res.employeeId)和客户id(res.wxExternalUserid)
        // 从群画像打开时可以获取群id(res.wxChatId)
        this.queryObj.roomId = res.wxChatId || "";
        this.queryObj.wxExternalUserid = res.wxExternalUserid || "";
        this.loadData();
      });
    },
    async loadData(reset, fn) {
      if (reset) {
        let { orderList, loadmoreStatus, page } = this.$options.data();
        this.page = page;
        this.orderList = orderList;
        this.loadmoreStatus = loadmoreStatus;
      }
      if (this.loadmoreStatus == "nomore") return;
      let formData = {
        ...this.queryObj,
        ...this.page,
        store_id: this.store_id,
        _a: "order",
      };
      const res = await new Promise((resolve, reject) => {
        uni.request({
          url: request.API_URL().split("?")[0] + "?r=/common/mochat/api",
          method: "GET",
          header: {
            "content-Type": "application/json",
          },
          data: formData,
          success: (res) => {
            resolve(res.data);
          },
          fail: (fail) => {
            reject(fail);
          },
        });
      });

      if (res.code == 1) return this.$utils.toast(res.msg);
      this.totalCount = res.data.totalCount;
      this.sumDaily = res.data.sumDaily;
      this.sumPayPrice = res.data.sumPayPrice;
      this.orderList.push(...res.data.data);
      this.loadmoreStatus =
        res.data.data.length < this.page.pageSize ? "nomore" : "loadmore";
      this.page.pageNo++;
      fn && fn();
    },
    onCopy(text) {
      // 创建一个临时的 textarea 元素
      const textarea = document.createElement("textarea");
      // 设置它的 value
      textarea.value = text;
      // 将元素添加到 DOM 中
      document.body.appendChild(textarea);
      // 选中元素中的文本
      textarea.select();
      // 复制文本
      document.execCommand("copy");
      // 移除临时元素
      document.body.removeChild(textarea);
      Toast("复制成功");
    },
  },
  onPullDownRefresh() {
    this.loadData(true, () => uni.stopPullDownRefresh);
  },
  onReachBottom() {
    this.loadData(false);
  },
};
</script>
<style lang="less" scoped>
.font-w-600 {
  font-weight: 600;
}
.color-999 {
  color: #8c8c8c;
}
.page-body {
  font-size: 28rpx;
  background: #f5f5f5;
  min-height: 100vh;
  .head {
    background: #fff;
    padding: 24rpx;
  }
  .head-total {
    border-radius: 10rpx;
    padding: 28rpx 0;
    display: flex;
    justify-content: space-around;
    background: #1890fe;
    color: #fff;
    font-size: 24rpx;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      > .total-price {
        margin-top: 8rpx;
        font-size: 36rpx;
      }
    }
  }

  .order-list {
    .order-item {
      padding: 24rpx;
      background: #fff;
      margin-top: 24rpx;
      .title {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        font-size: 26rpx;
        img {
          border-radius: 50%;
          width: 36rpx;
          height: 36rpx;
          margin-right: 14rpx;
        }
      }
      .goods {
        display: flex;
        > img {
          width: 140rpx;
          height: 140rpx;
          background: #f3f4f8;
          border-radius: 10rpx;
          margin-right: 20rpx;
        }
        .goods-content {
          flex: 1;
          width: 0;
          .name-price {
            display: flex;
            .name {
              flex: 1;
              width: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .price {
              margin-left: 44rpx;
            }
          }

          .attr-num {
            display: flex;
            margin-top: 10rpx;
            .attr {
              flex: 1;
              width: 0;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .num {
              margin-left: 44rpx;
              color: #f0250e;
            }
          }
        }
      }

      .total {
        margin-top: 10rpx;
        margin-bottom: 16rpx;
        text-align: right;
        color: #8c8c8c;
        .color-main {
          color: #f0250e;
          font-weight: 600;
        }
      }

      .order-no {
        padding: 24rpx;
        width: 702rpx;
        background: #f3f4f8;
        border-radius: 10rpx;

        .item {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          font-size: 26rpx;
          &:nth-last-child(1) {
            margin-bottom: 0;
          }
          .copy {
            margin-left: 10rpx;
            color: #1890fe;
          }
        }
      }
    }
  }
}
</style>
